<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" import="larrys.pomodoro.domain.entity.Round,larrys.pomodoro.domain.entity.Activity,
	java.util.Date,java.text.SimpleDateFormat,java.text.ParseException"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@	taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="<%=request.getContextPath()%>/static/countdown/js/jquery.countdown.min.js"></script>

<title><spring:message code="text_project_name" text="Pomodoro" />
</title>
<style>
.round-timer{
}

.round-timer .timer-numbers {
	font-family: "Candara", "Eurostile";
	font-style: italic;
	font-size: 10em;
	font-weight: normal;
}

.round-timer .round-activity-detail {
	
}

.round-timer .timer-control {
	color: normal;
}

.round-timer .timer-control a {
	margin-left: 5px;
	margin-right: 5px;
	text-decoration: none;
	color: #FAA732;
}

.round-timer .timer-control a:hover {
	color: #5BB75B;
}
.round-timer .timer-control a:focus {
}

.round-activity-detail {
	margin-top: 10px;
}
</style>
</head>
<body>
	<div class="row-fluid">
		<div class="container-fluid text-center">
			<div class="hero-unit round-timer">
				<%	
					SimpleDateFormat fmt = new SimpleDateFormat("mm:ss");
					Date restTimeDate = null;
					Date now = new Date();
					Round round = (Round)request.getAttribute("round");
					boolean hasRunningRound = false;
					boolean roundStarted = false;
					long durationMin = 0;
					long durationSec = 0;
					
					if(round!=null){
						hasRunningRound = true;
						int duration = round.getDuration();
						long durationInMillis = duration * 1000;
						
						roundStarted = round.getStartTime() != null;
						
						if(roundStarted){	
							long startTimeUntilNow = now.getTime() - round.getStartTime().getTime();
							if(startTimeUntilNow >= durationInMillis){
								durationMin = 0;
								durationSec = 0;
							}else{
								durationMin = (durationInMillis - startTimeUntilNow)/1000/60;
								durationSec = (durationInMillis - startTimeUntilNow)/1000%60;
							}						
						}else{
							durationMin = duration/60;
							durationSec = duration%60;
						}						
						try{					
							restTimeDate = fmt.parse(durationMin + ":" + durationSec);
						}catch(ParseException e){
							restTimeDate = fmt.parse("00:00");
						}
					}
				%>
<script>
	var durationInMillis = (<%=durationMin%>*60 + <%=durationSec%>) * 1000;
	
	var hasRunningRound = <%=hasRunningRound%>;
	var roundStarted = <%=roundStarted%>;
</script>
				<h1 class="timer-numbers">
					<%
					if(hasRunningRound){
					  	out.println(fmt.format(restTimeDate));
					}else{%>
						00:00
					<%} %>
				</h1>
				<p class="round-activity-detail">
					<spring:message code="text_activity" text="Activity" />:
					<%
					if(hasRunningRound){
						Activity relatedActivity = (Activity)request.getAttribute("activity");
						out.print(relatedActivity.getName());
					}else{
					%>	
						<spring:message code="text_norunninground" text="No Running Round" />
					<%
					}
					%>
				</p>
				<%if(hasRunningRound){ %>
				<div class="timer-control">
					<a id="timer-play" href="#" 
						title="<spring:message code="text_playround" text="Play Round" />">
						<i class="icon-play icon-large"></i>
					</a>
					<a id="timer-interrupted" href="<%=request.getContextPath()%>/pages/interruptround" 
						title="<spring:message code="text_interruptround" text="Round Interrupted" />">
						<i class="icon-remove icon-large"></i>
					</a>
					<a id="timer-finished" href="<%=request.getContextPath()%>/pages/finishround" 
						title="<spring:message code="text_finishround" text="Round Finished" />">
						<i class="icon-ok icon-large"></i>
					</a>
				</div>
				<%}%>
			</div>
		</div>
	</div>
<%if(hasRunningRound){ %>
<script>
	var $timerPlay = $("#timer-play");
	
	var timerInitilized = false;
	var $countdownTimer;
	
	var initTimer = function(){
		var restTime = new Date();
		restTime.setTime(restTime.getTime() + durationInMillis);
		$countdownTimer = $(".timer-numbers").countdown({
			alwaysExpire: true,
			until: restTime,
			layout: "{mn}:{snn}",
			onExpiry: function(){
				$timerPlay.hide();
				var $finishAnchor = $("#timer-finished");
				$finishAnchor.prop("href", $finishAnchor.prop("href") + "?full_round=true");
			}
		});
		timerInitilized = true;
	};
	
	if(roundStarted){
		initTimer();
		$timerPlay.hide();
	}
	
	$timerPlay.click(function(){
		if(!timerInitilized){
			$.ajax({
				url: "<%=request.getContextPath()%>/ajax/startround"
			}).done(function(data, textStatus, jqXHR){
				var result = $.parseJSON(data);
				if(result.success){
					initTimer();
					$timerPlay.hide();
				}else{
					alert(result.message);	
				}				
			});	
		}
		return false;
	});

</script>
<%} %>
</body>
</html>